<template>
	<div class="body Abnormal">
		<header>
			<i class="iconfont icon-xiangzuo1" @click="goPrev"></i><span>编辑</span>
		</header>
		<div class="form-content">
			<div class="form-item">
				<label>母单号 <span style="color:red">*</span></label>
				<el-input class="form-input" type="text" v-model="code" :disabled="true"></el-input>
			</div>
			<div class="form-item">
				<label>项目 <span style="color:red">*</span></label><br>
				<el-select v-model="project" placeholder="选择项目" @change="changeProject">
					<el-option v-for="item in projectList" :key="item.k" :label="item.v" :value="item.k">
					</el-option>
				</el-select>
			</div>
			<!-- <div class="form-item">
				<label>处理人<span> </span></label><br>
				<el-select v-model="downPerson" placeholder="选择处理人" @change="changeDownPerson">
					<el-option v-for="item in userList" :key="item.staff" :label="item.staffName" :value="item.staff">
					</el-option>
				</el-select>
			</div>
			<div class="form-item">
				<label>异常环节 <span style="color:red">*</span></label><br>
				<el-select v-model="abnormalLink" placeholder="异常环节选择">
					<el-option v-for="item in linkOptions" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
			</div> -->
			<div class="form-item">
				<label>异常原因 <span style="color:red">*</span></label><br>
				<el-select v-model="abnormalReason" placeholder="异常原因选择">
					<el-option v-for="item in reasonOptions" :key="item" :label="item" :value="item">
					</el-option>
				</el-select>
			</div>
			<div class="form-item">
				<label>异常描述</label>
				<el-input
				type="textarea"
				:rows="2"
				placeholder="请输入内容"
				v-model="abnormalExplain">
				</el-input>
			</div>
		</div>
		<div class="uploadImg" v-show="false">
			<v-uploader title="上传图片(限3张)"
			url="/system/app/abnormalUploadImage"
			@onErr ="onErr"
			@onSuccess ="onSuccess"
			:limit="3"
			ref="uploadAb"
			name="file"
			:params="uploadParams"/>
		</div>
		<div class="footer-commit">
			<div class="commit" @click="commitAbo">保存</div>
			<div class="commit" @click="goPrev">返回</div>
		</div>
	</div>
</template>
<script>
  import Scan from '@/components/ContinuousScan';
  import pictureSample from '@/components/pictureSample'
  import Header from '@/components/header'
  import Uploader from '@/components/uploaderEdit'
	import * as fetchObj from '@/api/index/reportAbnormal'
	import $ from "jquery"
	import { iatRecorder } from '@/utils/iatRecorder'
	import Vue from 'vue';
	import { Toast, Dialog } from 'vant';
	Vue.use(Toast).use(Dialog);
	export default {
		name: 'ReportAbnormal',
		components: {
			'v-scan': Scan,
      'v-header': Header,
      'v-uploader': Uploader, // 上传组件
      'pictureSample': pictureSample
		},
		data() {
			return {
				code: '',
				loadingData: false,
				fetchObj,
				headerName: '上报异常',
				responseData: {},
				OMS: {},
				aboType: '', // 异常类型
				typeOptions: [], // 异常类型下拉
				abnormalReason: '',
				project: '',
				downPerson: '',
				downNo: '', //  处理人工号
				returnTrackingCompany: '',
				returnTrackingNumber: '',
				reasonOptions: [],
				localtttOptions: [],
				abnormalLink: '',
				linkOptions: [],
				perOptions: [],
				abnormalExplain: '', // 异常描述
				allData: {}, // 所有异常数据
				uploadParams: {}, // 图片上传附带参数
				switchScan: true,
				CurrentCity: '', // 当前城市
				CurrentLocation: '', // 当前地址
				CurrentDistrict: '', // 当前区县
				longitude: '',
				latitude: '',
				labelList: [], // 标签号列表
				selectedLabelList: [], // 已选择的标签号列表
				labelInput: '', // 手动输入的标签
				iatRecorder3: null,
				mySecond: 0,
				startPerform: false,
        		businessType: '', // 产品名称
				projectList: [], // 项目列表
				userList: [], // 处理人列表
			}
		},
		watch: {
			aboType(val, oval) {
				let that = this;
				if (val != oval) {
					that.abnormalReason = '';
					for (let ty = 0; ty < that.allData.newAbnormalType.length; ty++) {
						if (that.allData.newAbnormalType[ty].abnormalType == val) {
							that.reasonOptions = that.allData.newAbnormalType[ty].abnormalReason;
						}
					}
				}
			}
		},
		mounted() {
			this.getAboList();
		},
		created() {
			let index = this.$route.query.index
			let orderInfo = this.$store.state.ReportAbnormalList[index]
			this.code = orderInfo.code
			this.abnormalReason = orderInfo.abnormalReason
			// this.abnormalLink = orderInfo.abnormalLink
			this.abnormalExplain = orderInfo.abnormalExplain
			// this.downPerson = orderInfo.downPerson
			// this.downNo = orderInfo.downNo
			this.project = orderInfo.project
			this.changeProject(this.project) 
			CallAndroidOrIOS.getImageChooserType('all');
		},
		methods: {
			/**
			 * 提交异常
			 */
			commitAbo() {
				let that = this;
				// if (!this.abnormalLink) {
				// 	this.$alert('请选择异常环节', '提示', {
				// 		confirmButtonText: '确定',
				// 	})
				// 	return
				// }
				if (!this.project) {
					this.$alert('请选择项目', '提示', {
						confirmButtonText: '确定',
					})
					return
				}
				if (!this.abnormalReason) {
					this.$alert('请选择异常原因', '提示', {
						confirmButtonText: '确定',
					})
					return
				}
				let index = this.$route.query.index
				let orderInfo = this.$store.state.ReportAbnormalList[index]
				let params2 = {
					id: orderInfo.id, 
					omsNo: orderInfo.code,
					deliveryNoSF: orderInfo.code,
					transporterId: this.$store.state.userInfo.orgnizationId,
					transporterName: this.$store.state.userInfo.orgnizationName,
					sponsorName: this.$store.state.userInfo.userName,
					cellphone: that.$store.state.userInfo.cellphone, // 司机电话
					abnormalReason: this.abnormalReason,
					// abnormalLink: this.abnormalLink,
					responsibleParty: orderInfo.aboPer,  
					aboText: this.abnormalExplain,
					// downPerson: this.downPerson,
					// downNo: this.downNo,
					project: this.project,
					downResult: orderInfo.downResult,
					editFlagTemp: 'T'
				} 
				this.uploadParams = {...this.uploadParams, ...params2}
				this.$refs.uploadAb.submit(this, this.uploadParams);	
			},
			
			onSuccess() {
				const params = {
					abnormalReason: this.abnormalReason,
					// abnormalLink: this.abnormalLink,
					abnormalExplain: this.abnormalExplain,
					// downPerson: this.downPerson,
					// downNo: this.downNo,
					project: this.project
				}
				let index = this.$route.query.index
				let address = this.$route.query.address
				let orderInfo = this.$store.state.ReportAbnormalList[index]
				this.$store.state.ReportAbnormalList[index] = {...orderInfo, ...params}
				this.$router.push({
					name: "ReportAbnormal",
					query: {
						address
					}
				})
			},
			onErr() {
			},
			// 请求下拉框数据
			getAboList() {
				let that = this;
				this.httpRequest1('post', '/system/app/abnormalSeleteData', {}).then(res => {
				that.typeOptions = res.data.abnormalType// 异常类型
				that.reasonOptions = res.data.abnormalReason // 异常原因
				that.linkOptions = res.data.abnormalLink // 异常环节
				that.perOptions = res.data.responsibleParty// 责任方
				})
				this.httpRequest1('post', '/system/app/queryDataDictionary', {"keyName":"工单维护-项目"}).then(res => {
					that.projectList = res.data
				})
			},
			// 切换项目名称
			changeProject (val) {
				let that = this
				this.httpRequest1('post', '/system/app/queryUserList', {"project": val, "userName":""}).then(res => {
					that.userList = res.data
				})
			},
			// 切换处理人
			changeDownPerson (val) {
				let downInfo = this.userList.filter(ele => ele.staff == val)[0]
				this.downPerson = downInfo.staffName,
				this.downNo = downInfo.staff
			},
			goPrev() {				
				let address = this.$route.query.address
				this.$router.push({
					name: "ReportAbnormal",
					query: {
						address
					}
				})
			},
    	},
  		beforeDestroy () {
			this.closeScan()
  		}
  }
</script>
<style scoped lang="less">
	@import "../../components/publicLess.less";
	.Abnormal {
		font-size: 28/50rem;
	}
	.form-content {
		padding: 20/50rem 40/50rem;
		padding-top: 80/50rem;
		padding-bottom: 0;
		background-color: #fff;
		position: relative;
	}
	.form-item {
		line-height: 55/50rem;
		margin: 26/50rem 0;
		.icon-yuyin{
			margin-left: 20/50rem;
			color: @PublicColor;
		}
		.form-prompt{
			color: #999;
			font-size: 27/50rem;
		}
		.form-end{
			float: right;
		}
		&>div {
			margin-top: 5/50rem;
		}
	}
	.content-input {
		display: flex;
		.form-input-1 {
			width: 600/50rem;
		}
		.button-add {
			width: 76/50rem;
			height: 76/50rem;
			font-size: 28/50rem;
			line-height: 80/50rem;
			margin: 0 10/50rem;
			text-align: center;
			background-color: @PublicColor;
			border-radius: 50%;
			color: #fff;
			cursor: pointer;
		}
	}
	.form-item label {
		display: inline-block;
		font-size: 30/50rem;
		color: #6f7180;
	}
	.form-item .sf-network-num{
		display: flex;
		line-height: 70/50rem;
		input{
			flex-grow: 1;
		}
		i{
			font-size: 50/50rem;
			color: @PublicColor;
			margin: 0 20/50rem;
		}
		span{
			height: 60/50rem;
			margin-top: 5/50rem;
			line-height: 60/50rem;
			width: 180/50rem;
			font-size: 28/50rem;
			background-color: @PublicColor;
			text-align: center;
			color: #fff;
			border-radius: 8/50rem;

		}
	}
	.footer-commit {
		font-size: 28/50rem;
		text-align: center;
		display: flex;
		width: 100%;
		color: #fff;
	}
	.footer-commit .commit {
		flex: 1;
		line-height: 70/50rem;
		margin: 0 30/50rem 30/50rem;
		background-color: @PublicColor;
		text-align: center;
		border-radius: 35/50rem;
	}
	.uploadImg {
		padding: 0 30/50rem 30/50rem;
		box-sizing: border-box;
		div {
			float: none;
		}
		&>div:nth-child(1) {
			margin-bottom: 15/50rem;
		}
		span {
			float: none;
			// color: #aaa;
		}
		.myUpload{
		padding-bottom: 0;
		}
	}
	.kong {
		width: 100%;
		height: 70/50rem;
	}
</style>